<template>
  <div class="container">
    <div class="m-breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/infoshow' }">文章管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/UEditor' }">
          <span v-if="!this.id">新增</span>
          <span v-if="this.id">修改</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="m-body">
      <el-form :model="form" :rules="rules" ref="form" label-width="150px" class="demo-ruleForm">
        <el-form-item label="题目：" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>

        <el-form-item label="PDF上传：">
          <el-upload
            class="upload-demo"
            ref="upload"
            drag
            :action="upUrl"
            :on-exceed="handleExceed"
            multiple
            :on-remove="handleRemove"
            :auto-upload="false"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="介绍：">
          <div id="editorElem"></div>
        </el-form-item>
        <el-form-item label="封面:">
          <el-upload
            class="upload-demo"
            ref="upload"
            :action="url"
            accept="image/jpeg, image/png, image/jpg"
            :file-list="fileList"
            :on-success="handleAvatarSuccess"
            :limit="1"
            :auto-upload="false"
            :on-remove="handleRemove"
            list-type="picture"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/jpeg/png文件</div>
            <el-button
              style="margin-left: 10px;"
              size="small"
              type="success"
              @click="submitUpload"
            >上传到服务器</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="分类：" prop="type">
          <el-select v-model="form.type" placeholder="请选择">
            <el-option
              v-for="item in typeList"
              :key="item._id"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="pdf地址：">
          <el-input v-model="form.pdfURL"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">保存</el-button>
          <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import E from "wangeditor";
import jwt_decode from "jwt-decode";
export default {
  name: "UEditor",
  data() {
    return {
      id: "",
      editorContent: "",
      imgRUL: "",
      upUrl: "",
      url: "/api/data/file",
      form: {
        type: "",
        title: "",
        pdfURL: ""
      },
      token: {},
      typeList: [],
      rules: {
        title: [{ required: true, message: "请输入题目", trigger: "blur" }],
        type: [{ required: true, message: "请选择分类", trigger: "blur" }]
      },
      fileList: []
    };
  },
  methods: {
    getContent() {
      alert(this.editorContent);
    },
    typelist() {
      this.$axios.get("/api/type").then(res => {
        this.typeList = res.data;
      });
    },
    handleExceed(file) {
      console.log(file);
    },
    handleRemove(file, fileList) {
      this.$axios
        .post("/api/data/file/del/" + file.response.slice(7))
        .then(res => {
          console.log(res);
        });
    },

    submitForm(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          let data = {
            type: this.form.type,
            title: this.form.title,
            content: this.editorContent,
            imgRUL: this.imgRUL,
            author: this.token.name,
            authorId: this.token.id,
            pdfURL: this.form.pdfURL
          };
          this.$axios.post("/api/data/add", data).then(res => {
            this.$router.push("/infoshow");
            this.$message("保存成功！");
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleAvatarSuccess(response, file, fileList) {
      this.imgRUL = "http://127.0.0.1:5000/" + response;
    }
  },
  mounted() {
    this.typelist();
    // this.id = this.$route.query.id;
    // if(this.id){
    //   this.$axios.get('/api/data/'+this.id).then(res=> {
    //     console.log(res)
    //     this.form.title = res.data.title
    //     this.form.type = res.data.type
    //     this.editorContent = res.data.content
    //     this.form.pdfURL = res.data.pdfURL
    //     this.fileList[0].url = res.data.imgURL
    //   }).catch(err => {
    //     console.log(err)
    //   })
    // }
    this.token = jwt_decode(localStorage.token);
    // wangeditor
    var editor = new E("#editorElem");
    editor.customConfig.onchange = html => {
      this.editorContent = html;
    };
    editor.customConfig.menus = [
      "head", // 标题
      "bold", // 粗体
      "fontSize", // 字号
      "fontName", // 字体
      "italic", // 斜体
      "underline", // 下划线
      "strikeThrough", // 删除线
      "foreColor", // 文字颜色
      "backColor", // 背景颜色
      "link", // 插入链接
      "list", // 列表
      "justify", // 对齐方式
      "quote", // 引用
      "emoticon", // 表情
      "table", // 表格
      "code", // 插入代码
      "undo", // 撤销
      "redo" // 重复
    ];
    editor.create();
  }
};
</script>

<style scoped>
/* .container {
  width: 100%;
  height: 100%;
  background-color: #f6f6f6f6;
} */
.m-breadcrumb {
  padding: 20px 0 0 24px;
}
.m-body {
  margin: 15px 20px;
  padding: 20px;
  background-color: #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
</style>